<template>
  <view class="page-container">
    <slot name="header" ref="headerRef"></slot>
    <view class="page-content" :style="{ paddingTop: headerHeight }">
      <slot name="content"></slot>
    </view>
    <view class="footer" v-if="showFooter">
      <view
        v-for="(item, index) in tabbarList"
        :class="['footer-item', item.class, commActive(item)]"
        :key="index"
        @click="changeTab(item.name)">
        <up-icon
          :name="customIcon(item)"
          :color="customColor(item)"
          :size="item.custom.size"></up-icon>
        <text v-if="activeTab == item.name && item.showText" class="tab-name">
          {{ item.text }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  showFooter: {
    type: Boolean,
    default: true,
  },
  activeTab: {
    type: String,
    required: true,
    default: "index",
  },
});
const tabbarList = [
  {
    pagePath: "/pages/index/index",
    text: "首页",
    icon: "home",
    name: "index",
    showText: true,
    custom: {
      size: 32,
    },
  },
  {
    pagePath: "/pages/ai-chat/ai-chat",
    text: "AI",
    icon: "http://www.adnaan.cn/chinese-images/svg/robot.svg",
    name: "AI",
    showText: true,
    custom: {
      size: 32,
      icon: "http://www.adnaan.cn/chinese-images/svg/robot-active.svg",
    },
  },
  {
    pagePath: "/pages/camera/camera",
    text: "识别",
    icon: "camera",
    name: "camera",
    showText: false,
    custom: {
      size: 32,
      class: "camera",
      color: "#fff",
    },
  },
  {
    pagePath: "/pages/list/list",
    text: "科普",
    icon: "bookmark",
    name: "list",
    showText: true,
    custom: {
      size: 32,
    },
  },
  {
    pagePath: "/pages/mine/mine",
    text: "我的",
    icon: "account",
    name: "mine",
    showText: true,
    custom: {
      size: 32,
    },
  },
];

const customIcon = (item) => {
  if (props.activeTab == item.name && item.custom.hasOwnProperty("icon")) {
    return item.custom.icon;
  } else {
    return item.icon;
  }
};

const commActive = (item) => {
  if (item.custom.hasOwnProperty("class")) {
    return item.custom.class;
  }
  if (props.activeTab == item.name) {
    return "active";
  }
};

const customColor = (item) => {
  if (item.custom.hasOwnProperty("color")) {
    return item.custom.color;
  }
  if (props.activeTab == item.name) {
    return "#8B5A2B";
  } else {
    return "#515151";
  }
};

function changeTab(name) {
  if (props.activeTab === name) {
    return;
  }
  uni.switchTab({
    url: tabbarList.filter((e) => e.name === name)[0].pagePath,
  });
}
const headerRef = ref(null);
const headerHeight = ref("");

onMounted(() => {
  uni
    .createSelectorQuery()
    .select(".header")
    .boundingClientRect((rect) => {
      if (rect) {
        headerHeight.value = rect.height + "px";
      }
    })
    .exec();
});
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  .page-content {
    flex: 1;
    background: $color-background;
    padding-bottom: 160rpx;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50rpx;
  padding-top: 30rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
  backdrop-filter: blur(20rpx); /* 模糊背景 */
  z-index: 999;

  .footer-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.active {
      position: relative;
      transform: scale(0.9);
      &::before {
        content: "";
        position: absolute;
        top: -10rpx;
        left: 50%;
        transform: translate(-50%, 0);
        width: 64rpx;
        height: 10rpx;
        background: $color-primary;
        border-radius: 10rpx;
        // 动画
        animation: footer-active 0.3s ease-in-out forwards;
        @keyframes footer-active {
          0% {
            transform: translate(-50%, 0);
          }
          100% {
            transform: translate(-50%, -10rpx);
          }
        }
      }
    }
    .tab-name {
      font-size: 24rpx;
      color: $color-primary;
      font-weight: bold;
    }
  }
}
.camera {
  scale: 1.5;
  transform: translateY(-20rpx);
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84rpx;
    height: 84rpx;
    background: $color-primary-light;
    border-radius: 50%;
  }
}
</style>
